<template>
  <div class="pe-label">
    <el-collapse :value="openedCollapse">
      <el-collapse-item title="文本设置" name="1">
        <div class="prop">
          <p class="block-title">图片预览（点击更换图片）：</p>
          <el-upload
            class="avatar-uploader"
            action="http://localhost:3100/page/upload/file"
            :show-file-list="false"
            :on-success="handleFileSuccess">
            <img v-if="item.src" :src="item.src" class="img-preview">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div class="prop">
          <span class="inline-title">背景色：</span>
          <el-color-picker v-model="item.style.backgroundColor" show-alpha></el-color-picker>
        </div>
        <div class="prop">
          <p class="block-title">透明度：</p>
          <div class="block">
            <el-slider v-model="item.style.opacity" show-input :max="1" :step="0.01">
            </el-slider>
          </div>
        </div>
        <div class="prop">
          <p class="block-title">旋转(°)：</p>
          <div class="block">
            <el-slider v-model="transform" show-input :max='360'>
            </el-slider>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="位置设置" name="2">
        <div class="font-position">
          <div class="prop">
            <p class="block-title">top:</p>
            <el-input size="mini" placeholder="请输入内容" v-model="item.style.top">
            </el-input>
          </div>
          <div class="prop">
            <p class="block-title">left:</p>
            <el-input size="mini" placeholder="请输入内容" v-model="item.style.left">
            </el-input>
          </div>
          <div class="prop">
            <p class="block-title">width:</p>
            <el-input size="mini" placeholder="请输入内容" v-model="item.style.width">
            </el-input>
          </div>
          <div class="prop">
            <p class="block-title">height:</p>
            <el-input size="mini" placeholder="请输入内容" v-model="item.style.height">
            </el-input>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="边框设置" name="3">
        <div class="prop">
          <span class="inline-title">边框颜色：</span>
          <el-color-picker v-model="item.style.borderColor" show-alpha></el-color-picker>
        </div>
        <div class="prop">
          <p class="block-title">边框宽度(px)：</p>
          <div class="block">
            <el-slider v-model="item.style.borderWidth" show-input :max='10'>
            </el-slider>
          </div>
        </div>
        <div class="prop">
          <span class="inline-title">边框类型：</span>
          <el-select v-model="item.style.borderStyle" placeholder="请选择边框类型">
            <el-option label="无边框" value="none"></el-option>
            <el-option label="点状" value="dotted"></el-option>
            <el-option label="虚线" value="dashed"></el-option>
            <el-option label="实线" value="solid"></el-option>
            <el-option label="双线" value="double"></el-option>
          </el-select>
        </div>
        <div class="prop">
          <p class="block-title">圆角(px)：</p>
          <div class="block">
            <el-slider v-model="item.style.borderRadius" show-input :max="200">
            </el-slider>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<style lang="scss">
@import '../../../config/variables.scss';
.pe-label {
  text-align: left;
  .prop {
    display: table;
    margin-top: 8px;
    width: 100%;
    &:first-child {
      margin-top: 0;
    }
    .inline-title {
      display: table-cell;
      padding-right: 8px;
      vertical-align: middle;
      width: 50px;
      text-align: right;
      word-break: break-all;
      white-space: nowrap;
    }
    .block-title {
      margin: 0;
    }
    .img-preview {
      width: 100%;
    }
  }
  .font-position {
    position: relative;
    overflow: hidden;
    .prop {
      &:first-child {
        margin-top: 8px;
        margin-left: 2px;
      }
      width: ($right-menu-width - 30px) / 4 - 4px;
      margin-left: 4px;
      float: left;
    }
  }
}
</style>
<script>
import Mixin from '@/components/public/Mixin'

export default {
  props: ['item'],
  data () {
    return {
      openedCollapse: ['1', '2', '3']
    }
  },
  mixins: [ Mixin ],
  methods: {
    handleFileSuccess (res, file) {
      console.log(res)
      console.log(file)
      this.item.src = res[0].path
    }
  }
}
</script>